<template>
    <section class="jumbotron">
        <h3 class="jumbotron-heading">Search Github Users</h3>
        <div>
            <input type="text" placeholder="enter the name you search" v-model="keyword"/>&nbsp;
            <button @click="searchuser">Search</button>
        </div>
    </section>
</template>

<script>
// 引入axios请求
import axios from 'axios'
export default {
    name:'Search',
    data() {
        return {
            keyword:'',
        }
    },
    methods: {
        searchuser(){
            this.$bus.$emit('updatalist',{isFirst:false,isLoading:true,errMsg:'',users:[]})
            axios.get(`http://api.github.com/search/users?q=${this.keyword}`).then(
                response=>{
                    console.log('请求成功了')
                    // 请求成功，向全局事件总线传递数据
                    this.$bus.$emit('updatalist',{isLoading:false,errMsg:'',users:response.data.items})
                },
                error=>{
                    console.log('请求失败了',error.message)
                    this.$bus.$emit('updatalist',{isLoading:false,errMsg:error.message,users:[]})
                }
            )
        }
    },
}
</script>

<style>
    .jumbotron{
        width:63%;
        height: 150px;
        background-color: rgb(209, 204, 204);
        border-radius: 10px;
        padding-top: 20px;
        padding-left: 100px;
        margin: 0 auto;
    }
    .jumbotron-heading{
        font-size: 26px;
    }
</style>